<template>
  <!-- 动火安全作业 -->
  <el-form
    ref="form"
    :model="form"
    :disabled="readonly"
    :rules="rules"
    label-width="220px"
  >
    <el-row style="
          display: flex !important;
          justify-content: space-around !important;
          flex-wrap: wrap;
        ">
      <el-col
        :span="item.span"
        v-for="(item, index) in formList"
        :key="index"
        
      >
        <!-- input -->
        <el-form-item
          v-if="item.type == 'input'"
          :maxlength="item.maxlength"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input
            :maxlength="50"
            style="width: 100%"
            v-model.trim="form[item.prop]"
            :disabled="readonly"
            :readonly="readonly"
            :placeholder="'请输入' + item.label"
          />
        </el-form-item>

        <!-- inputNumber -->
        <el-form-item
          v-if="item.type == 'inputNumber'"
          :maxlength="item.maxlength"
          :label="item.label"
          :prop="item.prop"
        >
          <div class="container">
            <el-input
              style="width: 100%"
              type="number"
              v-model.trim="form[item.prop]"
              :disabled="readonly"
              :placeholder="'请输入' + item.label"
            />
          </div>
        </el-form-item>

        <el-form-item
          v-if="item.type == 'textarea'"
          :label="item.label"
          :prop="item.prop"
          style="margin-top: 15px"
        >
          <el-input
            :maxlength="item.maxlength"
            type="textarea"
            :rows="6"
            style="width: 100%"
            v-model.trim="form[item.prop]"
            :readonly="readonly"
            :disabled="readonly"
            :placeholder="'请输入' + item.label"
          />
        </el-form-item>
        <!-- select -->
        <el-form-item
          v-if="item.type == 'select'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-select
            v-model="form[item.prop]"
            :placeholder="'请选择' + item.label"
            style="width: 100%"
            :disabled="disabled"
          >
            <el-option
              v-for="val in item.options"
              :key="val.value"
              :label="val.label"
              :value="val.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="item.type == 'selectFire'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-select
            multiple
            v-model="form.hangName"
            placeholder="请选择"
            style="width: 100%"
            :disabled="disabled"
          >
            <el-option
              v-for="dict in fireOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- selectDept -->
        <el-form-item
          v-if="item.type == 'selectDept'"
          :label="item.label"
          :prop="item.prop"
        >
          <inputTreeselect
            @emitDeptId="emitDeptId"
            v-model="form.workUnit"
            :disabled="disabled"
          ></inputTreeselect>
        </el-form-item>
        <!-- selectAddress -->
        <el-form-item
          v-if="item.type == 'selectAddress'"
          :label="item.label"
          :prop="item.prop"
        >
          <inputTreeselect
            @emitDeptId="emitAddressId"
            v-model="form.workUnitAddress"
            :disabled="disabled"
          ></inputTreeselect>
        </el-form-item>
        <!-- selectDuty -->
        <el-form-item
          v-if="item.type == 'selectDuty'"
          :label="item.label"
          :prop="item.prop"
        >
          <deptAndDutys
            type-show="duty"
            :listUser="listUser"
            :dutyId="form[item.prop]"
            :disabled="disabled"
          ></deptAndDutys>
        </el-form-item>
        <el-form-item
          v-if="item.type == 'datetimerange'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-date-picker
            :disabled="disabled"
            v-model="value1"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <!-- date -->
        <el-form-item
          v-if="item.type == 'date'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-date-picker
            :disabled="readonly"
            style="width: 100%"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            v-model="form[item.prop]"
            type="date"
            :placeholder="'请输入' + item.label"
          >
          </el-date-picker>
        </el-form-item>
        <!-- radio -->
        <el-form-item
          v-if="item.type == 'radio'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-radio-group style="width: 100%" v-model="form[item.prop]">
            <el-radio
              v-for="(val, ind) in item.list"
              :key="ind"
              :disabled="readonly"
              :label="val.label"
              >{{ val.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- radioLevel -->
        <el-form-item
          v-if="item.type == 'radioLevel'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-radio-group style="width: 100%" v-model="form[item.prop]">
            <el-radio
              v-for="(val, ind) in item.list"
              :key="ind"
              :disabled="readonly"
              :label="val.label"
              >{{ val.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- image -->
        <el-form-item
          v-if="item.type == 'image'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-image
            style="width: 100px; height: 100px"
            :src="form[item.prop]"
            fit="fit"
          ></el-image>
        </el-form-item>

        <!-- checkbox -->
        <el-form-item
          v-if="item.type == 'checkbox'"
          :label="item.label"
          :prop="item.prop"
        >
          <el-checkbox-group
            :disabled="disableAny"
            v-model="checkedCities"
            @change="(checked) => handleCheckedCitiesChange(checked, item)"
          >
            <el-checkbox v-for="val in safeList" :key="val" :label="val"
              >{{ val }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- VideoCheckbox -->
        <el-form-item
          v-if="item.type == 'VideoCheckbox'"
          :label="item.label"
          :prop="item.prop"
        >
          <elTables
            :isPagin="false"
            :table-data="tableData"
            :columns="clientColums"
            :cur-height="500"
          />
          <el-button plain type="" @click="addVideo" v-show="!disableAny"
            >添加监控
          </el-button>
        </el-form-item>
        <!-- elTables -->
        <el-form-item
          v-if="item.type == 'elTables'"
          :label="item.label"
          :prop="item.prop"
        >
          <elTables
            :isPagin="false"
            :table-data="tableData"
            :columns="clientColums"
            :cur-height="500"
          />
          <el-button plain type="" @click="addOperator" v-show="!disableAny"
            >添加作业人
          </el-button>
        </el-form-item>
        <!-- safeFormList -->
        <el-form-item
          v-if="item.type == 'safeFormList' && form.id"
          :label="item.label"
          :prop="item.prop"
        >
          <elTables
            :isPagin="false"
            :table-data="safetyTable"
            :columns="safetyColums"
            :cur-height="300"
          />
        </el-form-item>
        <!-- analysisInfo -->
        <el-form-item
          v-if="item.type == 'analysisInfo'"
          :label="item.label"
          :prop="item.prop"
        >
          <elTables
            :isPagin="false"
            :table-data="analysisTable"
            :columns="analysisColums"
            :cur-height="300"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 添加作业人弹框 -->
    <el-dialog
      :visible.sync="operatorDialog"
      v-if="operatorDialog"
      width="800px"
      append-to-body
      title="人员选择"
    >
      <el-input
        v-model="queryParams.nickName"
        clearable
        placeholder="搜索人员姓名"
        @input="inputUser"
        size="small"
        prefix-
        style="width: 240px; margin-bottom: 20px"
      />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="本公司" name="first">
          <elTables
            :isPagin="false"
            :table-data="personData"
            :columns="personColums"
            :cur-height="500"
            :iSselection="true"
            :currentPage="queryParams.pageNum"
            :pageSize="queryParams.pageSize"
            :handleSelectionChange="importSelectionChange"
          />
        </el-tab-pane>
        <el-tab-pane label="承包商" name="second">
          <elTables
            :isPagin="false"
            :table-data="contractorData"
            :columns="contractorColums"
            :cur-height="500"
            :iSselection="true"
            :currentPage="queryParams1.pageNum"
            :pageSize="queryParams1.pageSize"
            :handleSelectionChange="importSelectionChange"
          />
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="videoDialog"
      v-if="videoDialog"
      width="800px"
      append-to-body
      title="监控选择"
    >
      <el-input
        v-model="queryParams1.monitorName"
        clearable
        placeholder="搜索监控名称"
        @input="inputVideo"
        size="small"
        prefix-
        style="width: 240px; margin-bottom: 20px"
      />
      <elTables
        :isPagin="false"
        :table-data="videoData"
        :columns="videoColums"
        :cur-height="500"
        :iSselection="true"
        :totalLength="videototal"
        :handleSelectionChange="importSelectionChange1"
        :handle-current-change="handleCurrentChange"
      />
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 监控预览弹框 -->
    <!-- <div v-if="videoDialog" :class="videoDialog ? 'video' : ''">
      <i
        style="
          font-size: 50px;
          color: white;
          position: absolute;
          right: 0;
          top: 50px;
        "
        class="el-icon-close"
        @click="close"
      ></i>
      <div class="videoBox">
        <div id="videoElement1"></div>
      </div>
    </div> -->
  </el-form>
</template>
  
  <script>
//   import flvjs from "flv.js"
//   import WasmPlayer from "@easydarwin/easywasmplayer" //导入WasmPlayer.js
import { listUser } from "@/api/system/user.js";
//   import {checkProcess, getListByVideo,} from "@/api/specialWork/apply.js"
//   import {getList} from "@/api/contractor/person/index.js"
import { pageMonitor } from "@/api/video/monitor";
const defaultQueryParams = {
  pageNum: 1,
  pageSize: 10,
};
const defaultQueryParams1 = {
  current: 1,
  size: 10,
};
const safeOptions = [
  "物体打击",
  "车辆危害",
  "机械伤害",
  "起重危害",
  "触电",
  "淹溺",
  "灼烫",
  "高处坠落",
  "坍塌",
  "放炮",
  "火药炮炸",
  "化学爆炸",
  "物理爆炸",
  "中毒和窒息",
  "其他伤害",
];
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    var checkUnit = (rule, value, callback) => {
      if (this.form.workUnit) {
        this.$refs.form.clearValidate("workUnit");
        callback();
      } else if (!this.form.workUnit) {
        return callback(new Error("请选择作业单位"));
      } else {
        callback();
      }
    };
    var checkPerson = (rule, value, callback) => {
      if (
        !this.form.workTicketOperatorList ||
        this.form.workTicketOperatorList.length == 0
      ) {
        return callback(new Error("请选择作业人员信息"));
      } else if (this.form.workTicketOperatorList) {
        this.$refs.form.clearValidate("workTicketOperatorList");
        callback();
      }
    };
    const validateAddress = (rule, value, callback) => {
      if (!this.form.workUnitAddress) {
        callback(new Error("请选择作业区域所属部门"));
      } else if (this.isMsg) {
        callback(new Error(this.isMsg));
      } else {
        callback();
      }
    };
    return {
      AreaOptions: [], //区域字典
      fireOptions: [], //动火方式字典
      player: "",
      isMsg: false,
      form: {
        hazardResults: "",
        workVideo: "",
        workUnitAddress: null,
        hangName: [],
      },
      disableAny: false,
      safeList: safeOptions,
      videokey: 0,
      flvPlayer: null,
      src: "",
      videoDialog: false,
      allPersonInfo: [], //选中的人员数据
      listUser: [], //用户列表
      total: 0,
      total1: 0,
      videototal: 0,
      queryParams: Object.assign({}, defaultQueryParams),
      queryParams1: Object.assign({}, defaultQueryParams1),
      userList: [],
      batchData: [],
      videoData: [], //监控列表
      activeName: "first",
      operatorDialog: false, //添加作业人弹框
      videoDialog: false, //添加视频弹框
      checkedCities: [
        // "物体打击", "车辆危害", "其他伤害"
      ],
      checkedVideo: [],
      // 表单校验
      rules: {
        ticketStep: [
          {
            required: true,
            message: "请选择是否提级",
            trigger: ["blur", "change"],
          },
        ],
        workContent: [
          {
            required: true,
            message: "作业内容不能为空",
            trigger: ["blur", "change"],
          },
        ],
        workAddress: [
          {
            required: true,
            message: "动火地点及动火部位不能为空",
            trigger: ["change", "blur"],
          },
        ],
        dictCode: [
          {
            required: true,
            message: "请选择动火级别",
            trigger: ["blur", "change"],
          },
        ],
        hangName: [
          {
            required: true,
            message: "动火方式不能为空",
            trigger: ["blur", "change"],
          },
        ],
        workPersonLiable: [
          {
            required: true,
            message: "请选择作业负责人",
            trigger: ["blur", "change"],
          },
        ],
        workUnit: [
          { required: true, validator: checkUnit, trigger: ["blur", "change"] },
        ],
        workTicketOperatorList: [
          {
            required: true,
            validator: checkPerson,
            trigger: ["blur", "change"],
          },
        ],
        workUnitAddress: [
          {
            required: true,
            validator: validateAddress,
            trigger: ["blur", "change"],
          },
        ],
        hazardResults: [
          {
            required: true,
            message: "请选择危险辨识结果",
            trigger: "blur",
          },
        ],
        workVideo: [
          {
            required: true,
            message: "请选择涉及监控",
            trigger: "blur",
          },
        ],
        gasAnalysePerson: [
          {
            required: true,
            message: "请选择气体分析人",
            trigger: ["blur", "change"],
            type: "number",
          },
        ],
        safeDisclosePerson: [
          {
            required: true,
            message: "请选择安全交底人",
            trigger: ["blur", "change"],
          },
        ],
        allowDisclosePerson: [
          {
            required: true,
            message: "请选择接受交底人",
            trigger: ["blur", "change"],
          },
        ],
        workGuardian: [
          {
            required: true,
            message: "请选择监护人",
            trigger: ["blur", "change"],
          },
        ],
        shiftLeader: [
          {
            required: true,
            message: "请选择当班班长",
            trigger: ["blur", "change"],
          },
        ],
      },
      personData: [],
      contractorData: [],
      tableData: [],
      safetyTable: [
        {
          no: " 动火设备、管道清理干净，蒸汽吹扫或水洗合格，达到用火条件。断开与动火设备相连的所有管线，加盲板()块",
        },
        {
          no: "  罐区内动火点同一围堰 内和防火问距内的油罐不得同时进行脱水作业",
        },
        {
          no: "  动火点周围（最小半径15米）的下水井、地沟、地漏电缆沟等采取覆盖、铺沙、水封等手段进行隔离。",
        },
        {
          no: "    距离动火点30m内不得排放可燃气体；距动火点15m内不应排放可燃液体。在动火点10 m 范围内及用火点下方不应同时进行可燃溶剂清洗或喷漆等作业。",
        },
        {
          no: "  动火点周围易燃物已清除。",
        },
        {
          no: "  高处作业已采取防火花飞溅措施。",
        },
        {
          no: "  电焊回路已接在焊件上，把线不得穿过下水并或其他设备搭接。乙块瓶(直立放盟)、氧气瓶与动火点间距大于10m。",
        },

        {
          no: "   现场配备消防皮带()根，灭火器()台，铁锨()把，石棉布()块。",
        },
        {
          no: "  其它安全措施：请输入",
        },
      ], //安全措施列表
      analysisTable: [], //气体分析及数据
      // 列表基本数据、所有选择列
      clientColums: [
        {
          key: "operatorName",
          title: "昵称",
          sortable: false,
          show: true,
          checked: false,
        }, //sortable是否筛选 show选择列是否显示 checked选择列是否选中
        // {
        //   key: "operatorNumber",
        //   title: "证书编号",
        //   sortable: false,
        //   show: true,
        //   checked: true,
        // },
        {
          title: "操作",
          align: "center",
          width: 150,
          sortable: false,
          show: false,
          checked: true,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                    disabled: !this.disableAny,
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row);
                    },
                  },
                },
                "删除"
              ),
            ]);
          },
        },
      ],
      safetyColums: [
        {
          key: "content",
          title: "安全措施",
          sortable: false,
          show: true,
          checked: false,
          width: 700,
        },
        {
          key: "involve",
          title: "是否涉及",
          sortable: false,
          show: true,
          checked: false,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {},
                params.row.involve == 1
                  ? "是"
                  : params.row.involve == 0
                  ? "否"
                  : "待确认"
              ),
            ]);
          },
        },
        {
          key: "dutyPersonName",
          title: "确认人",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "dutyPersonContractorName",
          title: "作业方安全员",
          sortable: false,
          show: true,
          checked: false,
        },
      ],
      analysisColums: [
        {
          key: "gasSamplingTime",
          title: "气体分析取样时间",
          sortable: false,
          show: true,
          checked: false,
        }, //sortable是否筛选 show选择列是否显示 checked选择列是否选中
        {
          key: "gasName",
          title: "代表性气体",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "gasResult",
          title: "分析结果/%",
          sortable: false,
          show: true,
          checked: false,
        },
      ],
      personColums: [
        {
          key: "deptId",
          title: "部门",
          sortable: false,
          show: true,
          checked: false,
          render: (h, params) => {
            return h("div", [
              h("div", {}, params.row.dept ? params.row.dept.deptName : "-"),
            ]);
          },
        },
        {
          key: "nickName",
          title: "昵称",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "phonenumber",
          title: "联系方式",
          sortable: false,
          show: true,
          checked: false,
        },
      ],
      videoColums: [
        {
          key: "monitorName",
          title: "监控名称",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "workShopRoomName",
          title: "工房",
          sortable: false,
          show: true,
          checked: false,
        },
      ],
      contractorColums: [
        {
          key: "corporationName",
          title: "部门",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "userName",
          title: "昵称",
          sortable: false,
          show: true,
          checked: false,
        },
        {
          key: "phone",
          title: "联系方式",
          sortable: false,
          show: true,
          checked: false,
        },
      ],
      formList: [
        {},
        {
          label: "吊装地点",
          prop: "workAddress",
          span: 8,
          type: "input",
        },
        {
          label: "吊具名称",
          prop: "workAddress3",
          span: 8,
          type: "input",
        },
        {
          label: "吊物内容",
          prop: "workAddress2",
          span: 8,
          type: "input",
        },
        {
          label: "吊装质量",
          prop: "workAddress1",
          span: 8,
          type: "input",
        },
        {
          label: "吊装级别",
          prop: "hangName5",
          span: 8,
          type: "input",
        },
        {
          label: "指挥人",
          prop: "safeDisclosePerson",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "司索人",
          prop: "safeDisclosePersons",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "作业单位",
          prop: "workUnit",
          span: 8,
          type: "selectDept",
        },
        {
          label: "作业负责人",
          prop: "workPersonLiable",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "安全交底人",
          prop: "safeDisclosePerson1",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "接受交底人",
          prop: "allowDisclosePerson",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "监护人",
          prop: "workGuardian",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "当班班长",
          prop: "shiftLeader",
          span: 8,
          type: "selectDuty",
        },
        // {
        //   label: "作业区域所属部门",
        //   prop: "workUnitAddress",
        //   span: 8,
        //   type: "selectAddress",
        // },
        {span: 16,},
        
        {
          label: "关联其他特殊及票号",
          prop: "otherWorkTicket",
          span: 16,
          type: "input",
          maxlength: 300,
        },
        {span: 8,},
        {
          label: "作业内容",
          prop: "workContent",
          span: 16,
          type: "textarea",
          maxlength: 200,
        },
        {span: 8,},
        // {
        //   label: "动火级别",
        //   prop: "dictCode",
        //   span: 16,
        //   type: "radioLevel",
        //   list: [
        //     {
        //       label: 0,
        //       name: "特级",
        //     },
        //     {
        //       label: 1,
        //       name: "一级",
        //     },
        //     {
        //       label: 2,
        //       name: "二级",
        //     },
        //   ],
        // },
        // {span: 8,},
        // {
        //   label: "是否提级：",
        //   prop: "ticketStep",
        //   span: 8,
        //   type: "radio",
        //   list: [
        //     {
        //       label: 1,
        //       name: "是",
        //     },
        //     {
        //       label: 2,
        //       name: "否",
        //     },
        //   ],
        // },
        // {span: 8,},
        {
          label: "作业人员信息",
          prop: "workTicketOperatorList",
          span: 18,
          type: "elTables",
        },
        {span: 6,},
        {
          label: "涉及监控",
          prop: "workVideo",
          span: 16,
          type: "VideoCheckbox",
        },
        {span: 8,},
        {
          label: "危险辨识结果",
          prop: "hazardResults",
          span: 24,
          type: "checkbox",
        },

        {
          label: "安全措施",
          prop: "workTicketContentList",
          span: 24,
          type: "safeFormList",
        },
        // {
        //   label: "气体分析及数据",
        //   prop: "workTicketGasList",
        //   span: 24,
        //   type: "analysisInfo",
        // },
        // {
        //   label: "气体分析人",
        //   prop: "gasAnalysePerson",
        //   span: 8,
        //   type: "selectDuty",
        // },
      ],
    };
  },
  created() {
    //工作区域字典
    /*  this.getDicts("work_area").then((response) => {
          this.AreaOptions = response.data
        }),*/
    //动火方式字典
    this.getDicts("work_fire_way").then((response) => {
      this.fireOptions = response.data;
    });
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal);
      },
      deep: true,
    },
  },
  mounted() {
    this.getGasInfo();
  },

  methods: {
    getGasInfo() {
      listUser().then((res) => {
        this.listUser = res.rows;
      });
    },
    palyVideo(src) {
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById("videoElement");
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          hasAudio: false,
          url: src,
        });
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        this.flvPlayer.play();
      }
    },
    close() {
      this.videoDialog = false;
      this.player.destroy(this.videoElement);
    },
    play(url) {
      this.player = new WasmPlayer(null, "videoElement1", this.callbackfun, {
        decodeType: "auto", //解码类型(auto：默认，soft：强制H265解码)
        Height: true, //播放器尺寸是否继承父盒子的
        fluent: true,
        HideKbs: true,
      });
      // 调用播放
      this.player.play(url, 1);
    },
    viewVideo(val) {
      this.videoDialog = true;
      this.play(val.src);
    },
    /** 查询视频监控列表 */
    getPage() {
      pageMonitor(this.queryParams1).then((response) => {
        this.videoData = response.data.records;
        this.videototal = response.data.total;
      });
    },
    // 删除
    handleDelete(params) {
      this.tableData.splice(params.$index, 1);
      this.$message.success("删除成功");
    },
    handleClick(val) {
      if (this.activeName == "second") {
        this.getContractorList();
      } else {
        this.getCompanyList();
      }
    },
    inputUser() {},
    inputVideo(val) {
      this.queryParams1.monitorName = val;
      this.getPage();
    },
    // 获取本公司人员信息
    getCompanyList() {
      listUser(this.queryParams).then((res) => {
        this.personData = res.rows;

        this.total = res.total;
      });
    },
    // 获取承包商信息
    getContractorList() {
      // this.loading = true;
      this.queryParams1.blackStatus = 0;
      getList(this.queryParams1).then((res) => {
        this.contractorData = res.records;
        this.total1 = res.total;
      });
    },
    //赋值作业单位
    selectPersonChange(val) {
      console.log("workUnit-->", val);
      this.$set(this.form, "workPersonLiable", val.id);
      this.$set(this.form, "workUnit", val.userDeptId);
      // this.$set(this.form, "workUnit", val)
    },
    // 获取所有下拉框数据
    getTypeList() {},
    // 作业单位
    emitDeptId(val) {
      this.form.workUnit = val;
    },
    // 作业地点
    emitAddressId(val) {
      if (val) {
        this.form.workUnitAddress = val;
        this.checkProcess(val, 3);
      } else {
        this.$refs.form.clearValidate("workUnitAddress");
      }
    },
    //部门用户下拉树赋值
    emitUserId(_propKey, val) {
      this.$set(this.form, _propKey, val);
    },
    checkProcess(param, type) {
      if (param) {
        checkProcess({ param, type })
          .then((res) => {
            if (res.data) {
              this.isMsg = res.msg;
              this.$refs.form.validateField("workUnitAddress");
            } else {
              this.isMsg = false;
              this.$refs.form.clearValidate("workUnitAddress");
            }
          })
          .catch((err) => {});
      }
    },

    // 表单重置
    reset() {
      this.form = {};
      this.tableData = [];
      this.analysisTable = [];
      this.checkedCities = [];
      this.checkedVideo = [];
      this.$refs.form.clearValidate();
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false;
    },
    // 添加作业人员确定
    saveForm() {
      if (this.allPersonInfo.length > 0) {
        this.allPersonInfo = this.allPersonInfo.map((item) => {
          return {
            operatorName: item["nickName"] ?? item["userName"],
            operatorId: item["userId"],
          };
        });
        this.tableData = this.onlyOne(this.tableData, this.allPersonInfo);
        this.$set(this.form, "workTicketOperatorList", this.tableData);
        // this.form.workTicketOperatorList = this.tableData
        this.operatorDialog = false;
      } else {
        this.operatorDialog = true;
        this.$message.error("请勾选人员信息!");
      }
    },
    // 选择人员去重
    onlyOne(arr1, arr2) {
      let array = [...arr1, ...arr2];
      let newArray = [];
      for (let item1 of array) {
        let flag = true;
        for (let item2 of newArray) {
          if (item1.operatorId == item2.operatorId) {
            flag = false;
          }
        }
        if (flag) {
          newArray.push(item1);
        }
      }
      return newArray;
    },
    // 复选框视频
    importSelectionChange1(val) {
      this.allPersonInfo = val;
    },
    //视频分页
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getPage();
    },
    // 添加作业人
    addOperator() {
      this.operatorDialog = true;
      this.getCompanyList();
    },
    addVideo() {
      this.videoDialog = true;
      this.getPage();
    },
    handleCheckedCitiesChange(value, args) {
      this.$set(this.form, "hazardResults", value.toString());
      if (value) {
        this.$refs.form.clearValidate("hazardResults");
      }
    },
    handleCheckedVideoChange(value, args) {
      this.$set(this.form, "workVideo", value.toString());
      if (value) {
        this.$refs.form.clearValidate("workVideo");
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}

.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}

.video {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1002;

  .videoBox {
    margin-top: 10vh;
    height: 80vh;
    width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1003;
    background: white;
  }
}
</style>
  